<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-aside style="width: 200px; background-color: #303133">
        <span>BUCTCODER</span>
        <el-menu
            background-color="#303133"
            text-color="#fff"
            active-text-color="#fffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <router-link to="/personal">学生个人信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <router-link to="/home">所有学生信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <router-link to="/recent1">近期比赛统计</router-link>
            </template>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <router-link to="/atcoder">各类排行榜单</router-link>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header height="50px" background-color>
          <el-row>
            <el-col :span="23">
              <span>BUCTCODER</span>
            </el-col>
            <el-dropdown>
              <i class="el-icon-s-custom" style="margin-right: 10px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/">退出</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-header>

        <el-main>
          <el-row>
              <el-col :span="6">
                  <el-form :ref="form" :model="form" style="color: black">
                    <el-button type="text" @click="edit">编辑个人信息</el-button>
                    <el-form-item prop="stuid" label="学号">
                      <el-input v-model="form.stuid" style="width: 120px" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="stuname" label="姓名">
                      <el-input v-model="form.stuname" style="width: 120px" disabled></el-input>
                    </el-form-item >
                    <el-form-item prop="stuclass" label="班级">
                      <el-input v-model="form.stuclass" style="width: 120px" disabled></el-input>
                    </el-form-item >
                    <el-form-item prop="stuAcid" label="atcoder账号">
                      <el-input v-model="form.stuAcid" style="width: 120px" disabled></el-input>
                    </el-form-item >
                    <el-form-item prop="stuCfid" label="codeforces账号1">
                      <el-input v-model="form.stuCfid" style="width: 120px" disabled></el-input>
                    </el-form-item >
                    <el-form-item prop="stuCfid1" label="codeforces账号2">
                      <el-input v-model="form.stuCfid1" style="width: 120px" disabled></el-input>
                    </el-form-item >
                    <el-form-item prop="stuCfid2" label="codeforces账号3">
                      <el-input v-model="form.stuCfid2" style="width: 120px" disabled></el-input>
                    </el-form-item >
                  </el-form>
            </el-col>
            <el-col :span="9">
          <div style="width: 450px;height: 280px" id="lineCharts"> </div>
            </el-col>
            <el-col :span="9">
          <div style="width: 450px;height: 280px" id="lineCharts1"> </div>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts2"> </div>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts3"> </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
            <div style="width: 300px;height: 300px" id="lineCharts2"> </div>
            </el-col>
            <div style="color: #409EFF">
              <i class="el-icon-document"></i>
            <span>近期比赛</span>
            </div>
          <el-table :data="TableData" style="width: 900px" border fit highlight-current-row ref="editTable">
            <el-table-column prop="contestname" label="比赛名称">
              <template slot-scope="{row}">
                <el-link class="sub-body" @click="preview(row)">{{row.contestname}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="contestdate" label="比赛日期">
            </el-table-column>
            <el-table-column prop="tablename" label="比赛来源">
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="prev, pager, next,  sizes, total, jumper"
              :total="total"
              style="text-align: center"
          ></el-pagination>
          </el-row>
          <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
            <el-form :ref="editform" :model="editform" style="color: black">
              <el-form-item prop="stuid" label="学号">
                <el-input v-model="editform.stuid" disabled></el-input>
              </el-form-item>
              <el-form-item prop="stuname" label="姓名">
                <el-input v-model="editform.stuname"></el-input>
              </el-form-item >
              <el-form-item prop="stuclass" label="班级">
                <el-input v-model="editform.stuclass"></el-input>
              </el-form-item >
              <el-form-item prop="stuAcid" label="atcoder账号">
                <el-input v-model="editform.stuAcid"></el-input>
              </el-form-item >
              <el-form-item prop="stuCfid" label="codeforces账号1">
                <el-input v-model="editform.stuCfid"></el-input>
              </el-form-item >
              <el-form-item prop="stuCfid1" label="codeforces账号2">
                <el-input v-model="editform.stuCfid1"></el-input>
              </el-form-item >
              <el-form-item prop="stuCfid2" label="codeforces账号3">
                <el-input  v-model="editform.stuCfid2"></el-input>
              </el-form-item >
              <el-form-item class="button" align="center">
                <el-button type="primary" @click="update">确定</el-button>
                <el-button @click="dialogFormVisible=false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts"); // 引入基本模板
require("echarts/lib/component/tooltip"); // 引入提示框
require("echarts/lib/component/title"); // title组件
export default {
  name: "personal",
  data() {
    return {
      form:{},
      editform:{},
      TableData: [],
      dialogFormVisible: false,
      pagenum: 1,//当前加载的page
      pagesize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  mounted(){
    this.initform();
    this.initTable();
    this.drawLine();
    this.drawLine1();
    this.drawLine2();
    this.drawLine3()
  },
  methods: {
    handleCurrentChange(val) {
      this.pagenum = val; //val可以获取当前用户选择的页码数
      this.initTable();//页面加载触发的查询所有的事件
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pagesize = val;//获取用户想要每页显示的条数
      this.initTable();
    },
    initform() {
      this.$axios.get("/userinfo/profile/"+localStorage.getItem("userid"))
          .then(response => {
            this.form = response.data.data.student;
          })
    },
    initTable() {
      this.$axios.get("/common/getcontestsbystuid/"+this.pagenum+"/"+this.pagesize+"/"+localStorage.getItem("userid"))
          .then(response => {
            this.TableData = response.data.data.list;
            this.total = response.data.data.total;
          })
    },
    edit(){
      this.dialogFormVisible = true;
      this.editform = this.form
    },
    update() {
      this.dialogFormVisible = false;
      this.$axios
          .post('/student/update', {
            stuid: this.editform.stuid,
            stuname: this.editform.stuname,
            stuclass: this.editform.stuclass,
            stuAcid: this.editform.stuAcid,
            stuCfid: this.editform.stuCfid,
            stuCfid1: this.editform.stuCfid1,
            stuCfid2: this.editform.stuCfid2
          })
          .then(response => {
            this.initTable();
            alert('更新成功')
          })
    },
    drawLine() {
      var chartDom = document.getElementById('lineCharts');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+localStorage.getItem("userid"))
          .then(response => {
            if(response.data.data.accaree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>atcoder账号暂无数据</span>'
              document.getElementById('lineCharts').innerHTML=html
              document.getElementById('lineCharts').removeAttribute('_echarts_instance_')
            }
            else{
        var score = response.data.data.accaree.scores;
        var time = response.data.data.accaree.contestadates;
        option = {
          title: {
            subtext: 'atcoder账号的积分变化趋势图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
            axisLabel: {
              textStyle: {
                fontSize: '8'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
              lte: 6,
              color: 'green'
            },
              {
                gt: 6,
                lte: 8,
                color: 'green'
              },
              {
                gt: 8,
                lte: 14,
                color: 'green'
              },
              {
                gt: 14,
                lte: 17,
                color: 'green'
              },
              {
                gt: 17,
                color: 'green'
              }
            ]
          },
          series: [{
            name: '积分',
            type: 'line',
            smooth: true,
            data: score,
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
            }
          }]
        };
        option && myChart.setOption(option);
      }})
    },
    drawLine1() {
      var chartDom = document.getElementById('lineCharts1');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+localStorage.getItem("userid"))
          .then(response => {
            if(response.data.data.cfcaree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号1暂无数据</span>'
              document.getElementById('lineCharts1').innerHTML=html
              document.getElementById('lineCharts1').removeAttribute('_echarts_instance_')
            }
            else{
            var score = response.data.data.cfcaree.scores;
            var time = response.data.data.cfcaree.contestadates;
        option = {
          title: {
            subtext: 'codeforces账号1的积分变化趋势图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
            axisLabel: {
              textStyle: {
                fontSize: '8'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
              lte: 6,
              color: 'green'
            },
              {
                gt: 6,
                lte: 8,
                color: 'green'
              },
              {
                gt: 8,
                lte: 14,
                color: 'green'
              },
              {
                gt: 14,
                lte: 17,
                color: 'green'
              },
              {
                gt: 17,
                color: 'green'
              }
            ]
          },
          series: [{
            name: '积分',
            type: 'line',
            smooth: true,
            data: score,
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
            }
          }]
        };
        option && myChart.setOption(option);
      }})
    },
    drawLine2() {
      var chartDom = document.getElementById('lineCharts2');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+localStorage.getItem("userid"))
          .then(response => {
            if(response.data.data.cf1caree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号2暂无数据</span>'
              document.getElementById('lineCharts2').innerHTML=html
              document.getElementById('lineCharts2').removeAttribute('_echarts_instance_')
            }
            else{
            var score = response.data.data.cf1caree.scores;
            var time = response.data.data.cf1caree.contestadates;
        option = {
          title: {
            subtext: 'codeforces账号2的积分变化趋势图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
            axisLabel: {
              textStyle: {
                fontSize: '8'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
              lte: 6,
              color: 'green'
            },
              {
                gt: 6,
                lte: 8,
                color: 'green'
              },
              {
                gt: 8,
                lte: 14,
                color: 'green'
              },
              {
                gt: 14,
                lte: 17,
                color: 'green'
              },
              {
                gt: 17,
                color: 'green'
              }
            ]
          },
          series: [{
            name: '积分',
            type: 'line',
            smooth: true,
            data: score,
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
            }
          }]
        };
        option && myChart.setOption(option);
      }})
    },
    drawLine3() {
      var chartDom = document.getElementById('lineCharts3');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+localStorage.getItem("userid"))
          .then(response => {
            if(response.data.data.cf2caree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号3暂无数据</span>'
              document.getElementById('lineCharts3').innerHTML=html
              document.getElementById('lineCharts3').removeAttribute('_echarts_instance_')
            }
            else{
            var score = response.data.data.cf2caree.scores;
            var time = response.data.data.cf2caree.contestadates;
        option = {
          title: {
            subtext: 'codeforces账号3的积分变化趋势图'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          toolbox: {
            show: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time,
            axisLabel: {
              textStyle: {
                fontSize: '8'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisPointer: {
              snap: true
            }
          },
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
              lte: 6,
              color: 'green'
            },
              {
                gt: 6,
                lte: 8,
                color: 'green'
              },
              {
                gt: 8,
                lte: 14,
                color: 'green'
              },
              {
                gt: 14,
                lte: 17,
                color: 'green'
              },
              {
                gt: 17,
                color: 'green'
              }
            ]
          },
          series: [{
            name: '积分',
            type: 'line',
            smooth: true,
            data: score,
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
            }
          }]
        };
        option && myChart.setOption(option);
      }})
    },
    preview(row) {
      if(row.tablename=='codeforces'){
        this.$router.push({path: '/stucontest1', query: {id: row.contestname}})
      }
      else{
        this.$router.push({path: '/stucontest', query: {id: row.contestname}})
      }
    }
  }
}
</script>
<style>
.el-header {
  background-color: #F5F5F5;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>